<template>
  <div class="search">
    <div class="sou">
      <input type="text" placeholder="搜索华为" />
    </div>
    <div class="hot">
      <h3>热门产品</h3>
      <ul>
        <li>
          <img
            src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/p50-pro/list/black-3.png"
            alt=""
          />
          <p>HUAWEI P50 Pro</p>
        </li>
        <li>
          <img
            src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/p50-pro/list/black-3.png"
            alt=""
          />
          <p>HUAWEI P50 Pro</p>
        </li>
        <li>
          <img
            src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/p50-pro/list/black-3.png"
            alt=""
          />
          <p>HUAWEI P50 Pro</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss">
.search {
  width: 594px;
  margin: 50px auto;
  .sou {
    width: 554px;
    height: 60px;
    border-radius: 48px;
    border: 1px solid #333;
    line-height: 60px;
    input {
      width: 500px;
      padding-left: 20px;
      border: none;
      outline: none;
      margin-left: 10px;
    }
  }
  .hot {
    margin-top: 60px;
    font-size: 12px;
    color: #808080;
    ul {
      margin-top: 100px;
      display: flex;
      justify-content: space-around;
    }
    img {
      width: 70px;
    }
  }
}
</style>
